// 获取学员列表数据，渲染到表格
function render() {
  axios({
    url: 'http://ajax-api.itheima.net/students',
    headers: {
      Authorization: localStorage.getItem('token')
    }
  }).then(result => {
    // console.log(result.data.data)
    let newArry = result.data.data.map(item => {
      return `<tr>
      <td>${item.name}</td>
      <td>${item.age}</td>
      <td>${item.gender ? '女' : '男'}</td>
      <td> ${item.group}</td >
      <td>${item.hope_salary}</td>
      <td>${item.salary}</td>
      <td>${item.province} ${item.city} ${item.area}</td>
      <td>
        <a href="javascript:;" class="text-success mr-3"><i class="bi bi-pen" data-id="${item.id}"></i></a>
        <a href="javascript:;" class="text-danger"><i class="bi bi-trash"  data-id="${item.id}"></i></a>
      </td>
    </tr > `
    })
    document.querySelector('.list').innerHTML = newArry.join('')
  })
}
render()
// 省市县联动
let sheng = '<option value="">--省份--</option>'
let shi = '<option value="">--城市--</option>'
let xian = '<option value="">--地区--</option>'
let province = document.querySelector('[name=province]')
let city = document.querySelector('[name=city]')
let area = document.querySelector('[name=area]')
axios({
  url: '/api/province',
}).then(result => {
  let newArry = result.data.data.map(item => {
    return `<option value="${item}">${item}</option>`
  })
  document.querySelector('[name=province]').innerHTML = sheng + newArry.join('')
})
// 给省注册修改事件
document.querySelector('[name=province]').addEventListener('change', function () {
  // 切换省时重置区县
  area.innerHTML = xian
  axios({
    url: '/api/city',
    params: {
      pname: province.value
    }
  }).then(result => {
    let newArry = result.data.data.map(item => {
      return `<option value="${item}">${item}</option>`
    })
    city.innerHTML = shi + newArry.join('')
  })
})
// 市切换的时候，获取区县，并渲染
city.addEventListener('change', function () {
  axios({
    url: '/api/area',
    params: {
      pname: province.value,
      cname: city.value
    }
  }).then(result => {
    let newArr = result.data.data.map(item => `<option value="${item}">${item}</option>`)
    area.innerHTML = xian + newArr.join('')
  })
})
// 添加学员
// 模态框盒子
let addModal = new bootstrap.Modal('#modal')
// const myModalEl = document.getElementById('#modal')
document.querySelector('#modal').addEventListener('hidden.bs.modal', event => {
  document.querySelector('#form').reset()
})
// 注册点击事件
document.querySelector('#openModal').addEventListener('click', function () {
  document.querySelector('h5.modal-title').innerHTML = '添加学员'
  addModal.show()
  // document.querySelector('.bi-plus').addEventListener('click', function () {
  //   document.querySelector('#form').reset()
  // })
  // document.querySelector('.btn-secondary').addEventListener('click', function () {
  //   document.querySelector('#form').reset()
  // })
})
document.querySelector('#submit').addEventListener('click', function () {
  let data = val(document.querySelector('#form'))
  data.age = +data.age
  data.group = +data.group
  data.gender = +data.gender
  data.hope_salary = + data.hope_salary
  data.salary = +data.salary
  if (document.querySelector('.modal-title').innerHTML === '添加学员') {
    axios({
      url: '/students',
      method: 'post',
      data
    }).then(result => {
      message.success(result.data.message)
      document.querySelector('#form').reset()
      render()
      addModal.hide()
    })
  }
  if (document.querySelector('.modal-title').innerHTML === '修改学员') {
    const id = document.querySelector('h5.modal-title').dataset.id
    axios({
      url: `/students/${id}`,
      method: 'put',
      data
    }).then(result => {
      message.success(result.data.message)
      document.querySelector('#form').reset()
      render()
      addModal.hide()
    })
  }
})
// 找到tbody注册点击事件，里面判断点击的是删除，还是编辑
document.querySelector('tbody').addEventListener('click', async function (e) {
  if (e.target.classList.contains('bi-trash')) {
    // 说明点击了删除
    // console.log('你点击了删除')
    let id = e.target.dataset.id
    // 发送ajax请求，进行删除操作
    axios({
      url: `/students/${id}`,
      method: 'DELETE'
    }).then(result => {
      // console.log(result)
      message.success('删除成功') // 提示
      render() // 更新页面数据
    })
  }

  if (e.target.classList.contains('bi-pen')) {
    // 说明点击了编辑
    console.log('你点击了编辑')
    addModal.show()
    let id = e.target.dataset.id
    document.querySelector('h5.modal-title').innerHTML = '修改学员'
    document.querySelector('h5.modal-title').setAttribute('data-id', id)
    // 发送请求，获取当前修改的学员的详细信息
    let result = await axios({ url: `/students/${id}` })
    console.log(result)
    // 根据当前学员的信息 获取城市和区县渲染
    let res1 = await axios({
      url: '/api/city',
      params: {
        pname: result.data.data.province
      }
    })
    let res2 = await axios({
      url: '/api/area',
      params: {
        pname: result.data.data.province,
        cname: result.data.data.city
      }
    })
    // 渲染
    let newArry1 = res1.data.data.map(item => {
      return `<option value="${item}">${item}</option>`
    })
    city.innerHTML = shi + newArry1.join('')
    let newArry2 = res2.data.data.map(item => `<option value="${item}">${item}</option>`)
    area.innerHTML = xian + newArry2.join('')
    val(document.querySelector('#form'), result.data.data)
    // 给模态框的X注册点击事件清空点击编辑后点击X关掉未做修改没有触发提交按钮事件时，表单的值会保留到点击添加按钮显示的模态框上
    // document.querySelector('.btn-close').addEventListener('click', function () {
    //   document.querySelector('#form').reset()
    // })
    // document.querySelector('.btn-secondary').addEventListener('click', function () {
    //   document.querySelector('#form').reset()
    // })
  }
})

